<template>
  <div ref="leftEcharts" class="footer"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "FooterRigth",
  mounted() {
    let leftEcharts = echarts.init(this.$refs.leftEcharts);
    leftEcharts.setOption({
      xAxis: {
        show: true,
        type:'category',
        data: ["开发部", "销售部", "市场部", "人事部", "维修部"],
      },
      yAxis: {
        show: true,
        // 坐标轴 轴线
        axisLine: {
          show: true,
          //线
          lineStyle: {
            color: "green", //线的颜色
            width: 1, //线的宽度
            type: "solide", //显得类型
          },
        },
        //坐标轴 刻度 就是纵向多出来的小线
        axisTick: {
          show: true,
          inside: false, //---是否朝内
          lengt: 1, //长度
          lineStyle: {
            width: 1,
            type: "solid",
          },
        },
      },
      series: [
        {
          name: "开发部",
          type: "line",
          data: [56, 32, 12, 43, 59],
        },
        {
          name: "销售部",
          type: "line",
          data: [14, 45, 76, 34, 89],
        },
        {
          name: "市场部",
          type: "line",
          data: [28, 26, 45, 65, 12],
        },
        {
          name: "人事部",
          type: "line",
          data: [68, 42, 37, 72, 34],
        },
        {
          name: "维修部",
          type: "line",
          data: [87, 34, 23, 16, 76],
         
        },
      ],
      legend: {
        //根据系列筛选，需要配合series使用
        data: ["开发部", "销售部", "市场部", "人事部", "维修部"],
      },
      tooltip:{}
    });
  },
};
</script>

<style>
.footer {
  width: 100%;
  height: 100%;
}
</style>